<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>其他内部指令(v-pre & v-cloak & v-once)</title>
    <script src="../assets/js/vue.js"></script>
    <style>
        [v-cloak] {
            display: block;
        }
    </style>
</head>

<body>
    <h1>其他内部指令(v-pre & v-cloak & v-once)</h1>
    <hr>
    <div id="app">
        <div v-pre>
            <h2>v-pre</h2>
            在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
            <br> {{message}}
        </div>
        <div>

            <h2>v-once指令</h2>
            在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
            <div v-once>第一次绑定的值：{{message}}</div>
            <div>
                <input type="text" v-model="message">
            </div>
        </div>

        <div>

            <h3>v-cloak指令</h3>
            在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
            <div v-cloak>
                {{message}}
            </div>
        </div>
    </div>



    <script>

        var app = new Vue({
            el: "#app",
            data: {
                message: "holle world"
            }
        })
    </script>
</body>

</html>